<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="page-tools" style="margin-top:0px;">
        <el-row type="flex" justify="space-between" align="middle">
          <el-form :inline="true">
            <el-form-item label="设备名称">
              <el-input v-model="searchItem.name" placeholder="请输入设备名" />
            </el-form-item>
            <el-form-item label="设备详情">
              <el-input v-model="searchItem.details" placeholder="请输入设备详情" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="searchHandle">搜索</el-button>
              <el-button icon="el-icon-refresh-left" @click="restHandle">重置</el-button>
            </el-form-item>
          </el-form>
        </el-row>
      </el-card>
      <!-- 放置表格和分页 -->
      <el-card v-loading="loading">
        <page-tools :show-before="true">
          <span slot="before">共{{ page.total }}条记录</span>
          <template slot="after">
            <el-button :disabled="!checkPermission('api-equip-post')" size="small" type="primary" @click="$router.push(`/equip/addequip/`)">新增设备</el-button>
          </template>
        </page-tools>
        <el-table border stripe highlight-current-row :data="equiplist">
          <el-table-column type="index" label="序号" width="100" align="center" />
          <el-table-column label="设备名称" prop="name" align="center" />
          <el-table-column label="照片" prop="photoid" width="60" align="center">
            <template slot-scope="scope">
              <el-image
                :src="`http://124.222.15.71:8191/api/hold/imgdownload?fileName=${scope.row.photoid}`"
                :preview-src-list="[`http://124.222.15.71:8191/api/hold/imgdownload?fileName=${scope.row.photoid}`]"
                fit="fill"
                lazy
              />
            </template>
          </el-table-column>
          <el-table-column label="设备数量" prop="num" align="center" />
          <el-table-column label="设备描述" prop="details" align="center" />
          <el-table-column label="添加时间" prop="createtime" align="center" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button :disabled="!checkPermission('api-equipdetail-get')" type="success" size="small" @click="$router.push(`/equip/detail?id=${scope.row.id}`)">查看</el-button>
              <el-button :disabled="!checkPermission('api-equip-put')" type="primary" size="small" @click="$router.push(`/equip/editequip?id=${scope.row.id}`)">修改</el-button>
              <el-button :disabled="!checkPermission('api-equip-delete')" type="danger" size="small" @click="delEquip(scope.row.id)">删除</el-button>
              <!-- <el-button :disabled="!checkPermission('api-equiplend-post')" type="text" size="small" @click="$router.push(`/equip/lendequip?equipid=${scope.row.id}`)">租借</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="end" align="middle" style="height: 60px">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :page-size="page.size"
            :current-page="page.page"
            :total="page.total"
            :page-sizes="[1, 5, 10, 20]"
            @current-change="changePage"
            @size-change="handleSizeChange"
          />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getEquipList, delEquip } from '@/api/equip'

export default {
  data() {
    return {
      searchItem: {
        details: '',
        name: ''
      },
      loading: false,
      equiplist: [], // 接数据的
      page: {
        page: 1, // 当前页码
        size: 5,
        total: 0 // 总数
      }
    }
  },
  created() {
    this.getEquipList()
  },
  methods: {
    changePage(newPage) {
      this.page.page = newPage
      this.getEquipList()
    },
    handleSizeChange(newSize) {
      this.page.size = newSize
      this.getEquipList()
    },
    searchHandle() {
      const searchItem = {}
      for (const key in this.searchItem) {
        if (this.searchItem[key] !== '') {
          searchItem[key] = this.searchItem[key]
        }
      }
      this.getEquipList(searchItem)
    },
    restHandle() {
      this.searchItem.name = ''
      this.searchItem.details = ''
      this.getEquipList()
    },
    async getEquipList(searchItem) {
      this.loading = true
      const { total, rows } = await getEquipList(this.page.page, this.page.size, searchItem)
      this.page.total = total
      this.equiplist = rows
      this.loading = false
    },
    delEquip(id) {
      this.$confirm('确定要删除该设备吗').then(() => {
        // 如果点击了确定就会进入then
        return delEquip(id) // 返回promise对象
      }).then(() => {
        this.$message.success('删除设备成功')
        this.getEquipList()
      })
    }
  }
}
</script>

<style>
</style>
